import React, { useState, useEffect } from 'react';
import { connect } from 'dva';
import { Form, Icon, Input, Button, Checkbox, Spin } from 'antd';
import QueueAnim from 'rc-queue-anim';
import Texty from 'rc-texty';
import { useBoolean } from '@umijs/hooks';
import ChangePassword from '@/pages/User/components/ChangePassword';
import { jsEncodePwd, getTerminalType } from '@/utils/utils';
import 'rc-texty/assets/index.css';
import styles from './less/login.less';
import styles2 from './less/meteor.less';

const FormItem = Form.Item;

const dataSource = {
  wrapper: { className: 'banner3' },
  textWrapper: {
    className: 'banner3-text-wrapper',
    children: [
      {
        name: 'slogan',
        className: 'banner3-slogan',
        children: 'PMC • 流程配置管理平台',
        texty: true,
      },
    ],
  },
};

function LoginPage({
  dispatch,
  needVerifyCode,
  needModifyPsw,
  verifyCode,
  forceLogin,
  submitting,
  initLoading,
  form: { getFieldDecorator, validateFields, getFieldValue },
}) {
  // const [verifyCode, setVerifyCode] = useState(null);
  const [userCode, setUserCode] = useState();
  const { state: visible, setTrue: show, setFalse: hide } = useBoolean(false);

  const slogon = dataSource.textWrapper.children.map(item => {
    const { name, texty, ...$item } = item;

    return (
      <div key={name} {...$item}>
        {texty ? <Texty type="mask-bottom">{item.children}</Texty> : item.children}
      </div>
    );
  });

  function handleSubmit(e) {
    e.preventDefault();
    validateFields((err, values) => {
      if (!err) {
        const { password, userCode } = values;
        const formValues = {
          userCode,
          password: jsEncodePwd(password),
          clientType: getTerminalType(),
          loginWay: 'password',
        };

        // 验证码
        if (needVerifyCode === true) {
          formValues.verifyCode = values.verifyCode;
        }

        // true 通知后台强制登录（非工作时间）
        if (forceLogin === true) {
          formValues.forceLogin = true;
        }

        dispatch({
          type: 'login/login',
          payload: formValues,
        });
      }
    });
  }

  function getVerifyCode() {
    dispatch({
      type: 'login/addVerifyCode',
    });
  }

  function clearVerifyCode() {
    dispatch({
      type: 'login/clearVerifyCode',
    });
  }

  function handleClose() {
    dispatch({
      type: 'login/update',
      payload: {
        needModifyPsw: false,
      },
    });
    hide();
  }
  useEffect(() => {
    dispatch({
      type: 'login/getInitData',
    });
  }, [dispatch]);

  useEffect(() => {
    if (needVerifyCode) {
      getVerifyCode();
    } else {
      clearVerifyCode();
    }
  }, [needVerifyCode]);

  useEffect(() => {
    if (needModifyPsw) {
      show();
      setUserCode(getFieldValue('userCode'));
    } else {
      hide();
    }
  }, [getFieldValue, hide, needModifyPsw, show]);

  return (
    <div {...dataSource.wrapper}>
      <div className={`${styles2.meteor} ${styles2.meteor1} ${styles2.meteorFla}`} />
      <div className={`${styles2.meteor} ${styles2.meteor2} ${styles2.meteorFla2}`} />
      <div className={`${styles2.meteor} ${styles2.meteor3} ${styles2.meteorFla3}`} />
      <div className={`${styles2.meteor} ${styles2.meteor4} ${styles2.meteorFla4}`} />
      <QueueAnim key="QueueAnim" type={['bottom', 'top']} delay={200} {...dataSource.textWrapper}>
        {slogon}
        <div className={styles.form}>
          <div className={styles.panel}>
            <div className={styles.panelHead}>
              <div className={styles.panelTit}>登录</div>
              <div className={styles.panelSubtit}>使用工号或手机号登录</div>
            </div>
            <div className={styles.panelBody}>
              <Spin spinning={initLoading} delay={300}>
                <Form onSubmit={handleSubmit} className="login-box" autoComplete="off">
                  <FormItem style={{ marginBottom: 16 }}>
                    {getFieldDecorator('userCode', {
                      rules: [
                        {
                          required: true,
                          // type: 'string',
                          // len: 8,
                          message: '请输入工号或手机号码',
                        },
                      ],
                    })(
                      <Input
                        prefix={
                          <Icon
                            type="user"
                            style={{
                              color: 'rgba(0,0,0,.25)',
                            }}
                          />
                        }
                        placeholder="工号或手机号码"
                      />
                    )}
                  </FormItem>
                  <FormItem style={{ marginBottom: 16 }}>
                    {getFieldDecorator('password', {
                      rules: [
                        {
                          required: true,
                          // min: 8,
                          message: '输入的密码有误',
                        },
                      ],
                    })(
                      <Input
                        prefix={<Icon type="lock" style={{ color: 'rgba(0,0,0,.25)' }} />}
                        type="password"
                        placeholder="密码"
                      />
                    )}
                  </FormItem>
                  {needVerifyCode === true ? (
                    <FormItem style={{ marginBottom: 16 }}>
                      {getFieldDecorator('verifyCode', {
                        rules: [
                          {
                            required: true,
                            // min: 8,
                            message: '验证码错误',
                          },
                        ],
                      })(
                        <Input
                          addonAfter={
                            <img
                              src={verifyCode}
                              onClick={getVerifyCode}
                              style={{ cursor: 'pointer' }}
                              width={64}
                              height={28}
                              alt="code"
                            />
                          }
                          type="text"
                          placeholder="验证码"
                        />
                      )}
                    </FormItem>
                  ) : null}
                  {/* <FormItem>
                    <a
                      href="#"
                      className="pull-right"
                      onClick={e => {
                        e.preventDefault();
                      }}
                    >
                      忘记密码
                    </a>
                    <Checkbox>自动登录</Checkbox>
                  </FormItem> */}
                  <FormItem className="padding-top">
                    <Button
                      type="primary"
                      block
                      size="large"
                      htmlType="submit"
                      loading={submitting}
                    >
                      登录
                    </Button>
                  </FormItem>
                </Form>
              </Spin>
            </div>
          </div>
        </div>
        <ChangePassword
          visible={visible}
          close={handleClose}
          userCode={userCode}
          onSuccess={handleClose}
        />
      </QueueAnim>
    </div>
  );
}

export default connect(({ login, loading }) => ({
  forceLogin: login.forceLogin,
  needModifyPsw: login.needModifyPsw,
  needVerifyCode: login.needVerifyCode,
  verifyCode: login.verifyCode,
  initLoading: loading.effects['login/getInitData'],
  submitting: loading.effects['login/login'],
}))(Form.create()(LoginPage));
